<template>
  <view class="box">
    <!-- 导航条 -->
    <view class="navbar">
      <text class="logo" @click="back">
        <uni-icons type="left" size="30"></uni-icons>
      </text>
      <text class="title">修改发文申请</text>
      <text @click="drafts" class="caogao">草稿箱</text>
    </view>
    <view class="example">
      <!-- 基础用法，不包含校验规则 -->
      <uni-forms
        label-width="100px"
        ref="baseForm"
        :rules="rules"
        :model="baseFormData"
      >
        <uni-forms-item class="label" label="申请部门" required name="chepai">
          <uni-data-select
            v-model="baseFormData.chepai"
            :localdata="range"
            @change="change"
            placeholder="请选择"
          ></uni-data-select>
        </uni-forms-item>
        <uni-forms-item class="label" label="需求类型" required name="chepai">
          <uni-data-select
            style="margin: 0 0 10px 0"
            v-model="baseFormData.chepai"
            :localdata="range"
            @change="change"
            placeholder="请选择"
          ></uni-data-select>
        </uni-forms-item>
      </uni-forms>
    </view>
    <uni-file-picker
      style="padding: 18px; background-color: #fff"
      title="上传文件"
      :imageStyles="imageStyles"
    ></uni-file-picker>
    <view class="bottom">
      <u-cell-group>
        <u-cell
          title="审批流程"
          label="已有管理员预设审批人，不可修改和删除"
          center
        ></u-cell>
      </u-cell-group>
      <view class="step">
        <view class="step_left">
          <uni-icons type="person" size="30"></uni-icons>
          <view class="line"></view>
          <uni-icons type="person" size="30"></uni-icons>
        </view>
        <view class="step_right">
          <view class="step_right_title">
            <text>科室领导</text>
          </view>
          <view class="step_right_con">
            <text>王婷婷</text>
          </view>
          <view class="step_right_title">
            <text>办公室</text>
          </view>
          <view class="step_right_con">
            <text>王子西</text>
          </view>
        </view>
      </view>
    </view>
    <view style="height: 80px"></view>
    <view class="below">
      <u-button class="btn" type="primary" @click="submit('baseForm')">
        暂存
      </u-button>
      <u-button class="btn" type="primary" @click="submit('baseForm')">
        提交申请
      </u-button>
    </view>
  </view>
</template>

<script>
export default {
  name: "MinirabbitAdd",

  data() {
    return {
      imageStyles: {
        width: 110,
        height: 100,
      },
      // 表单数据
      baseFormData: {
        chepai: "",
        fees: "",
        name: "",
        age: "",
      },
      range: [
        {
          value: "1",
          text: "123",
        },
      ],
      rules: {
        chepai: {
          rules: [
            {
              required: true,
              errorMessage: "车牌号码不能为空",
            },
          ],
        },
        fees: {
          rules: [
            {
              required: true,
              errorMessage: "费用说明不能为空",
            },
          ],
        },
      },
    };
  },

  mounted() {
  },

  methods: {
    drafts() {
      uni.navigateTo({
        url: "/pages/dispatch/drafts",
      });
    },
    back() {
      uni.navigateBack({
        delta: 1,
      });
    },
    submit(ref) {
      this.$refs[ref]
        .validate()
        .then((res) => {
          uni.showToast({
            title: `校验通过`,
          });
        })
        .catch((err) => {
        });
    },
    change() {},
  },
};
</script>

<style lang="scss" scoped>
page {
  background-color: #f2f2f2;
}
.box {
  min-height: 100vh;
  position: relative;
  background-color: #f2f2f2;
}
.example {
  background-color: #fff;
}
.navbar {
  width: 100%;
  height: 80px;
  line-height: 80px;
  background-image: url("@/static/dispatch.png");
  position: relative;
  .title {
    padding-left: 28%;
    font-size: 19px;
    font-weight: 600;
  }
  .caogao {
    color: #6f87f6;
    margin-left: 20%;
  }
}
.label {
  margin: 10px 0;
  padding: 0 12px 0 18px !important;
}
.bottom {
  margin-top: 10px;
  background-color: #fff;
}
.btn {
  width: 40%;
  display: inline-block;
  line-height: 40px;
  margin: 5%;
}
.below {
  width: 90%;
  position: absolute;
  left: 5%;
  bottom: 20px;
}
.step {
  display: flex;
  padding: 10px;
  width: 100%;
  .step_left {
    flex: 1;
    display: flex;
    flex-direction: column;
    .line {
      width: 1px;
      background-color: #4265f3;
      height: 80px;
      // margin: auto;
      margin: 0 auto;
    }
  }
  .step_right {
    flex: 6;
    .step_right_title {
      font-size: 14px;
      height: 30px;
      line-height: 30px;
    }
    .step_right_con {
      height: 80px;
      font-size: 14px;
      line-height: 80px;
      // padding-left: 40px;
    }
  }
}
</style>